<template>
  <div class="border-b border-gray-100 p-4 hover:bg-gray-50 transition-colors">
    <div class="flex items-center justify-between">
      <div class="flex-1">
        <div class="flex items-center mb-2">
          <div class="flex items-center space-x-2 mr-4">
            <span v-if="job.urgent" class="bg-orange-100 text-orange-500 text-xs px-2 py-0.5 rounded">急聘</span>
            <span v-if="job.featured" class="bg-red-100 text-red-500 text-xs px-2 py-0.5 rounded">置顶</span>
          </div>
          <h3 class="font-medium text-gray-800 mr-4">{{ job.title }}</h3>
          <span :class="statusClasses" class="px-2 py-1 rounded-full text-xs">
            {{ statusText }}
          </span>
        </div>
        
        <div class="flex items-center text-sm text-gray-500 space-x-4 mb-2">
          <span>{{ job.department || '未分配部门' }}</span>
          <span>{{ job.location }}</span>
          <span>{{ job.salary }}</span>
          <span>{{ job.experience }}</span>
        </div>
        
        <div class="flex items-center text-sm text-gray-400 space-x-4">
          <span class="flex items-center">
            <i class="ri-eye-line mr-1"></i>
            浏览 {{ job.views }}
          </span>
          <span class="flex items-center">
            <i class="ri-message-3-line mr-1"></i>
            沟通 {{ job.communications }}
          </span>
          <span class="flex items-center">
            <i class="ri-heart-line mr-1"></i>
            感兴趣 {{ job.interested }}
          </span>
          <span>发布于 {{ job.createdAt }}</span>
          <span>有效期至 {{ job.expiresAt }}</span>
        </div>
      </div>
      
      <div class="flex items-center space-x-2 ml-4">
        <button 
          @click="$emit('viewApplications', job.id)"
          class="px-3 py-1.5 text-primary border border-primary rounded hover:bg-primary hover:text-white transition-colors text-sm"
        >
          查看投递
        </button>
        <button 
          @click="$emit('edit', job.id)"
          class="px-3 py-1.5 text-gray-600 border border-gray-300 rounded hover:bg-gray-50 transition-colors text-sm"
        >
          编辑
        </button>
        <button 
          @click="$emit('toggleStatus', job.id)"
          :class="[
            'px-3 py-1.5 rounded text-sm transition-colors',
            job.status === 'active' 
              ? 'text-orange-600 border border-orange-300 hover:bg-orange-50' 
              : 'text-green-600 border border-green-300 hover:bg-green-50'
          ]"
        >
          {{ job.status === 'active' ? '暂停' : '启用' }}
        </button>
        <button 
          @click="$emit('delete', job.id)"
          class="px-3 py-1.5 text-red-600 border border-red-300 rounded hover:bg-red-50 transition-colors text-sm"
        >
          删除
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Job } from '../types'

interface Props {
  job: Job
}

const props = defineProps<Props>()

defineEmits<{
  edit: [jobId: string]
  delete: [jobId: string]
  toggleStatus: [jobId: string]
  viewApplications: [jobId: string]
}>()

const statusClasses = computed(() => {
  switch (props.job.status) {
    case 'active':
      return 'bg-green-100 text-green-600'
    case 'pending':
      return 'bg-yellow-100 text-yellow-600'
    case 'closed':
      return 'bg-gray-100 text-gray-600'
    case 'failed':
      return 'bg-red-100 text-red-600'
    default:
      return 'bg-gray-100 text-gray-600'
  }
})

const statusText = computed(() => {
  switch (props.job.status) {
    case 'active':
      return '招聘中'
    case 'pending':
      return '待审核'
    case 'closed':
      return '已关闭'
    case 'failed':
      return '审核失败'
    default:
      return '未知状态'
  }
})
</script>
